<script setup lang="ts">
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import MeetingEnrollTable from '#/views/meeting/enroll/index.vue';

// const props = defineProps<{ groupId?: number | string }>();
const emit = defineEmits<{ reload: [] }>();

const currMeetingId = ref<number | string>();
const meetingName = ref<string>('');
const table = ref();
const [BasicDrawer, drawerApi] = useVbenDrawer({
  class: 'w-[80%]',
  onClosed: handleClosed,
  footer: false,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }

    const { meetingId, name } = drawerApi.getData() as {
      meetingId?: number | string;
      name?: string;
    };

    if (name) {
      meetingName.value = name;
    }
    if (meetingId) {
      currMeetingId.value = meetingId;
    }
  },
});

async function handleClosed() {
  //
}
</script>

<template>
  <BasicDrawer :title="`${meetingName} - 报名情况`">
    <MeetingEnrollTable
      ref="table"
      readonly
      :meeting-id="currMeetingId"
      @reload="emit('reload')"
    />
  </BasicDrawer>
</template>
